<template>
    <div class="product-list__category" v-if="category">
        <div class="product-list__go-back-wrapper">
            <div class="product-list__go-back" @click="category=0">
                <i class="yith-pos-icon-arrow-left"></i>
            </div>
        </div>
        <div class="product-list product-list__list" ref="products" @scroll.prevent="scroll">
            <div class="product-item" v-for="(product,index) in products" :key="index"
                 @click="select(product)">
                <div class="product-image" v-if="product.images.length > 0">
                    <img :src="$imageSrc(product.images[0].src)" alt="">
                </div>
                <div class="product-heading">
                    <div class="title">{{ product.name }}</div>
                    <div class="price">€{{ product.price }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-scroll" v-else>
        <div class="product-list">
            <div class="product-item" v-for="(c,index) in categories" :key="index" @click="selectCat(c)">
                <div class="product-image">
                    <img :src="$imageSrc(c.image.src)" alt="">
                </div>
                <div class="product-heading">
                    <div class="title">{{ c.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ProductCategories",
    data() {
        return {
            categories: [],
            products: [],
            category: 0,
            page: 1,
            loading: true,
            loadingMore: false,
            hasMore: false
        }
    },
    methods: {
        fetchList() {
            let {category, page} = this;
            this.$http.get('/products', {
                params: {category, page, per_page: 18}
            }).then(response => {
                if (this.loadingMore) {
                    this.products = this.products.concat(response);
                } else {
                    this.products = response;
                }

                this.hasMore = response.length === 18;
            }).catch(reason => {
                console.log(reason.message);
            }).finally(() => {
                this.loading = false;
                this.loadingMore = false;
            })
        },
        fetchCategories() {
            this.$http.get('/products/categories', {
                params: {
                    hide_empty: true,
                    per_page: 90,
                    offset: 0
                }
            }).then(response => {
                this.categories = response;
            }).catch(reason => {
                console.log(reason);
            }).finally(() => {
                this.loading = false;
            });
        },
        select(p) {
            this.$emit('select', p);
        },
        selectCat(c) {
            this.category = c.id;
            this.page = 1;
            this.products = [];
            this.fetchList();
        },
        loadMore() {
            if (this.loading || this.loadingMore || !this.hasMore) {
                return false;
            }
            this.page++;
            this.loadingMore = true;
            this.fetchList();
        },
        scroll() {
            this.$refs.products.addEventListener('scroll', event => {
                const scrollTop = this.$refs.products.scrollTop;
                const scrollHeight = this.$refs.products.scrollHeight;
                const clientHeight = this.$refs.products.clientHeight;

                if (scrollHeight - scrollTop < clientHeight + 10) {
                    this.loadMore();
                }
            });
        }
    },
    mounted() {
        this.fetchCategories();
    }
}
</script>

<style scoped>

</style>